<template>
	<view class="login-container">
		<view class="login-form">
			<text class="login-title">用户登录</text>
			
			<view class="avatar-container">
				<image 
					class="avatar" 
					:src="avatarUrl" 
					@click="chooseAvatar"
					mode="aspectFill"
				></image>
				<text class="avatar-tip" @click="chooseAvatar">点击更换头像</text>
			</view>

			<input class="input" type="text" placeholder="请输入用户名" v-model="username"/>
			<input class="input" type="password" placeholder="请输入密码" v-model="password"/>

			<view class="remember-box" @click="toggleRemember">
				<view class="checkbox" :class="{'checked': isRemember}">
					<text v-if="isRemember" class="check-icon">✓</text>
				</view>
				<text class="remember-text">记住密码</text>
			</view>

			<button class="login-btn" type="primary" @click="handleLogin">登录</button>

			<view class="register">
				<navigator url="/pages/register/register">没有账号？去注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				avatarUrl: '/static/default-avatar.png',
				isRemember: false
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		methods: {
			// 选择更换头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.avatarUrl = res.tempFilePaths[0];
						uni.previewImage({
							current: res.tempFilePaths[0],
							urls: res.tempFilePaths
						});
						uni.setStorageSync('userAvatar', res.tempFilePaths[0]);
					},
					fail: (err) => {
						console.log('选择头像失败：', err);
						uni.showToast({
							title: '选择头像失败',
							icon: 'none'
						});
					}
				});
			},
			// 切换记住密码状态
			toggleRemember() {
				this.isRemember = !this.isRemember;
			},
			// 加载本地存储的用户信息
			loadUserInfo() {
				const rememberStatus = uni.getStorageSync('isRemember');
				if (rememberStatus) {
					this.isRemember = rememberStatus;
					this.username = uni.getStorageSync('username') || '';
					this.password = uni.getStorageSync('password') || '';
				}
				const savedAvatar = uni.getStorageSync('userAvatar');
				if (savedAvatar) {
					this.avatarUrl = savedAvatar;
				}
			},
			// 处理登录逻辑
			handleLogin() {
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					});
					return;
				}

				// 记住密码逻辑
				if (this.isRemember) {
					uni.setStorageSync('username', this.username);
					uni.setStorageSync('password', this.password);
					uni.setStorageSync('isRemember', true);
				} else {
					uni.removeStorageSync('password');
					uni.setStorageSync('isRemember', false);
				}

				// 强制存储用户名（标识登录状态）
				uni.setStorageSync('username', this.username);
				// 同步头像存储
				if (this.avatarUrl !== '/static/default-avatar.png') {
					uni.setStorageSync('userAvatar', this.avatarUrl);
				}

				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/cardViewPage/mypage/mypage"
					});
				}, 1500);
			}
		}
	}
</script>

<style scoped>
.login-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f5f7fa;
	padding: 40rpx;
	box-sizing: border-box;
}

.login-form {
	width: 100%;
	max-width: 600rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	box-sizing: border-box;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 40rpx;
}

.avatar-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;
}

.avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	border: 4rpx solid #f0f0f0;
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.avatar-tip {
	font-size: 24rpx;
	color: #666;
	margin-top: 15rpx;
}

.input {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	border-bottom: 1rpx solid #f0f0f0;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	margin-bottom: 30rpx;
}

.remember-box {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #ccc;
	border-radius: 6rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15rpx;
}

.checkbox.checked {
	background-color: #007aff;
	border-color: #007aff;
}

.check-icon {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
}

.remember-text {
	font-size: 26rpx;
	color: #666;
}

.login-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 30rpx;
	margin-bottom: 30rpx;
}

.register {
	font-size: 26rpx;
	color: #007aff;
}
</style>